<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <script src="ele/vue.js"></script>
    <link rel="stylesheet" href="ele/index.css" />
    <link rel="stylesheet" href="css/info.css" />
    <script src="ele/index.js"></script>
    <script src="js/axios.js"></script>
</head>

<body>
    <div id="app">
        <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box" label-position="top">
            <h3 class="login-title">欢迎来到极简</h3>
            <el-form-item label="账号" prop="usname" size="small">
                <el-input id="name" v-model="form.usname" placeholder="请输入帐号">
                </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="psword" size="small">
                <el-input id="password" v-model="form.psword" type="password" placeholder="请输入密码">
                </el-input>
            </el-form-item>
            <el-button class="login-sub" type="info" plain v-on:click="onSubmit('loginForm')">确 认 登 录</el-button>
            <div class="t-right" style="margin-top: 10px;">
                <el-link href="/resume/register.html" type="info">忘记密码 </el-link> &nbsp;&nbsp;&nbsp;
                <el-link href="/resume/register.html" type="info"> 新用户注册</el-link>
            </div>
        </el-form>

        <!--    -->
        <el-dialog title="温馨提示" :visible.sync="dialogVisible">
            <span>请输入账号和密码</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="info" size="mini" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            dialogVisible: false,
            form: {
                usname: '',
                psword: ''
            },
            // 表单验证，需要在 el-form-item 元素中增加 prop 属性
            rules: {
                usname: [
                    { required: true, message: '账号不可为空', trigger: 'blur' }
                ],
                psword: [
                    { required: true, message: '密码不可为空', trigger: 'blur' }
                ]
            }
        },
        methods: {
            onSubmit(formName) {
                // 为表单绑定验证功能
                let t = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //登录验证
                        axios.post("/resume/member/login", t.form).then((resp)=>{
                            console.log(resp);
                            if (resp.data.code == 200) {
                                t.$message.success(resp.data.message);
                                //登录成功 -- 将获取到的用户信息，存储到浏览器本地的localStorage
                                localStorage.setItem("MEMBER", JSON.stringify(resp.data));
                                window.location.href = "page/main.html";
                            }else{
                                t.$message.error(resp.data.message);
                            }
                        });
                        // if (true) {
                        //     localStorage.setItem("MEMBER", JSON.stringify({'petName':'张三','id':'1'}));
                        //     window.location.href = "page/main.html";
                        // } else {
                        //     t.$message.error("用户名或密码错误！");
                        // }
                    } else {
                        this.dialogVisible = true;
                        return false;
                    }
                });
            }
        }
    })

</script>

</html>